<template>
	<div class="balance">
		<div class="balance-head">
			<div class="balance-toast">可提现金额 <svg-icon @click="showDialog('提现说明')" class="icon" iconName="help221d2c"></svg-icon></div>
			<div class="balance-kiting">
				<div>¥{{ userInfo.balance }}</div>
				<div @click="routeKiting">
					提现记录
				</div>
			</div>
		</div>
		<div class="balance-head-before">
			<div class="accumulative">
				<div>¥{{ userInfo.alreadyCommission }}</div>
				<div>累计已入帐</div>
			</div>
			<div class="line"></div>
			<div class="about">
				<div>¥{{ userInfo.notCommission }}</div>
				<div>即将入帐</div>
			</div>
		</div>
		<div class="kiting-account" @click="settingAccount">
			<div class="title">
				<svg-icon class="icon" iconName="pay-yzf"></svg-icon>
				<span>提现到翼支付</span>
			</div>
			<div class="account">
				<!--<div class="van-ellipsis">-->
				<!--{{ userInfo.nickName }}-->
				<!--</div>-->
				<div>{{ userInfo.phone }}</div>
				<!-- <van-icon class="icon" color="#000" size="16px" name="arrow" /> -->
			</div>
		</div>
		<div class="kiting-money">
			<div class="kiting-explain">
				<p>提现金额</p>
				<div class="rule" @click="showDialog('提现规则')">
					<i class="iconfont icon-jinggao"></i>
					<p>提现规则</p>
				</div>
			</div>
			<van-cell-group class="cell-group">
				<van-field
					placeholder="¥最小不低于1元"
					@blur="withdrawChange"
					@input="val => (money = val)"
					type="number"
					max="500"
					min="0"
					:value="money"
				>
					<div class="all-kiting" slot="button" size="small" type="primary" @click="money = userInfo.balance">全部提现</div>
				</van-field>
			</van-cell-group>
		</div>
		<div class="kiting-btn">
			<van-button @click="checkWithdrawals" round block :disabled="moneyDisavled" color="linear-gradient(to right, #F70114, #F77301)"
				>确认提现</van-button
			>
			<!-- <van-button @click="submitBalance" round block color="linear-gradient(to right, #F70114, #F77301)">全部提取</van-button> -->
		</div>

		<!-- 弹窗 -->
		<myDialog :title="dialogTitle" ref="myDialog" @close="close">
			<div class="content-box">
				<template v-if="dialogTitle === '提现说明'">
					<div>
						【提现到账】
					</div>
					<div>
						审核通过的申请将在1-3个工作日内自动到账，请耐心等待。
					</div>
					<div>
						【提现通道】
					</div>
					<div>
						提现现金通过翼支付转账给您，请绑定您的翼支付账号。
					</div>
				</template>

				<template v-if="dialogTitle === '提现规则'">
					<div>
						1、每天最多可提现5次，每月最多可提现30次。
					</div>
					<div>
						2、账户余额满1元即可提现。
					</div>
					<div>
						3、每次最多可提现500元，每月最高可提现20000元。
					</div>
					<div>
						4、存在其他提现问题请及时联系客服处理。
					</div>
					<a class="know" @click="closeDialog">知道了</a>
				</template>

				<template v-if="dialogTitle === '申请成功'">
					<div class="succeed">
						<p>¥{{ money | Fixed(2) }}</p>
						<span>提现金额</span>
					</div>
					<div style="margin-bottom: 30px;text-align: center">
						提现申请已提交成功，系统将会在1-3个工作日内完成审核并通过翼支付转账给您！
					</div>
					<a class="know" @click="closeDialog">我知道了</a>
				</template>

				<template v-if="errorCode === 1001">
					<div style="text-align: center; margin-bottom: 30px">
						您的账户异常，请联系客服处理
					</div>
					<a class="know" @click="callKefu"><i class="iconfont icon-kefu"></i>联系客服</a>
				</template>

				<template v-if="errorCode === 1002 || errorCode === 1003 || errorCode === 1007">
					<div style="text-align: center; margin-bottom: 30px">
						{{ errorMessage }}
					</div>
					<a class="know" @click="closeDialog">知道了</a>
				</template>

				<template v-if="errorCode === 1004">
					<div style="text-align: center; margin-bottom: 30px">您本日免费提现次数已达上限<br />请明日再来提现哦～</div>
					<a class="know" @click="closeDialog">知道了</a>
				</template>

				<template v-if="errorCode === 1005">
					<div style="text-align: center; margin-bottom: 30px">您本月免费提现次数已达上限<br />请次月再来提现哦～</div>
					<a class="know" @click="closeDialog">知道了</a>
				</template>

				<template v-if="errorCode === 1006">
					<div style="text-align: center; margin-bottom: 30px">您本月提现金额超过20000元<br />提现点击下方按钮联系客服处理。</div>
					<a class="know" @click="callKefu"><i class="iconfont icon-kefu"></i>联系客服</a>
				</template>

				<!--<template v-if="dialogTitle === '温馨提示4'">-->
				<!--<div style="margin-bottom: 30px">-->
				<!--您本月免费提现次数已达上限，本次提现将扣除【】%手续费，是否立即提现？-->
				<!--</div>-->
				<!--<div class="footer">-->
				<!--<div class="cancel" @click="closeDialog">取消</div>-->
				<!--<div class="submit" @click="submitBalance">确定</div>-->
				<!--</div>-->
				<!--</template>-->
			</div>
		</myDialog>
	</div>
</template>
<script>
import myDialog from './components/my-dialog';
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			money: '',
			dialogTitle: '提现说明',
			errorCode: null,
			errorMessage: null
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		moneyDisavled() {
			if (this.money > 500) {
				return true;
			} else {
				return this.money > parseFloat(this.userInfo.balance) || this.money == '' || this.money < 1;
			}
		}
	},
	watch: {
		money(val) {
			if (val > 500) {
				this.$toast('提现金额不能大于500元!');
			} else {
				val > parseFloat(this.userInfo.balance) ? this.$toast('提现金额不能大于可提现金额哦!') : '';
				let arr = val.split('.');
				if (arr[1] && arr[1].length > 2) {
					this.money = Number(val).toFixed(2);
				}
			}
		}
	},
	components: {
		myDialog
	},
	methods: {
		// 暂时无需设置提现账号
		settingAccount() {
			return;
			// this.$router.push('/member-balance-set-account');
		},
		showDialog(title) {
			this.dialogTitle = title;
			this.$refs['myDialog'].open();
		},
		close() {
			this.errorCode = null;
			this.errorMessage = null;
			this.dialogTitle = null;
		},
		closeDialog() {
			this.$refs['myDialog'].close();
		},
		callKefu() {
			this.$refs['myDialog'].close();
			this.$router.push('/member-service');
		},
		routeKiting() {
			this.$router.push('/member-record');
		},
		withdrawChange() {
			if (this.money > 500) {
				this.money = 500;
			} else if (this.money > parseFloat(this.userInfo.balance)) {
				this.$toast('已为您重置为最大可提现金额!');
				this.money = this.userInfo.balance;
			}
		},
		submitBalance() {
			this.$service.member.withdraw
				.add({
					amount: this.money,
					app: 'yzf'
				})
				.then(() => {
					this.$store.dispatch('GET_USERINFO');
					// this.$toast('申请成功');
					this.showDialog('申请成功');
				})
				.catch(error => {
					this.errorCode = error.code;
					this.errorMessage = error.message;

					// 您的账户异常，请联系客服
					if (error.code === 1001) {
						this.showDialog('账户冻结');
					}
					// 提现金额不得少于X元
					if (error.code === 1002) {
						this.showDialog('温馨提示');
					}
					// 提现金额不得高于X元
					if (error.code === 1003) {
						this.showDialog('温馨提示');
					}
					// 已超过今日可提现次数
					if (error.code === 1004) {
						this.showDialog('温馨提示');
					}
					// 已超过本月可提现次数
					if (error.code === 1005) {
						this.showDialog('温馨提示');
					}
					// 已超过本月可提现金额
					if (error.code === 1006) {
						this.showDialog('温馨提示');
					}
					// 余额不足
					if (error.code === 1007) {
						this.showDialog('温馨提示');
					}
				});
		},
		checkWithdrawals() {
			this.$service.member.withdraw
				.check({
					amount: this.money,
					app: 'yzf'
				})
				.then(() => {
					this.submitBalance();
				})
				.catch(error => {
					this.errorCode = error.code;
					this.errorMessage = error.message;

					// 您的账户异常，请联系客服
					if (error.code === 1001) {
						this.showDialog('账户冻结');
					}
					// 提现金额不得少于X元
					if (error.code === 1002) {
						this.showDialog('温馨提示');
					}
					// 提现金额不得高于X元
					if (error.code === 1003) {
						this.showDialog('温馨提示');
					}
					// 已超过今日可提现次数
					if (error.code === 1004) {
						this.showDialog('温馨提示');
					}
					// 已超过本月可提现次数
					if (error.code === 1005) {
						this.showDialog('温馨提示');
					}
					// 已超过本月可提现金额
					if (error.code === 1006) {
						this.showDialog('温馨提示');
					}
					// 余额不足
					if (error.code === 1007) {
						this.showDialog('温馨提示');
					}
				});
		}
	}
};
</script>
<style lang="scss" scoped>
.balance {
	/* prettier-ignore */
	font-size: 14PX;
	.balance-head {
		padding: 64px 26px 0 40px;
		width: 100%;
		height: 230px;
		background: rgba(255, 205, 135, 1);
		.balance-kiting {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24px;
			div:nth-child(1) {
				/* prettier-ignore */
				font-size:22PX;
				font-weight: 500;
			}
			div:nth-child(2) {
				/* prettier-ignore */
				font-weight:500;
				width: 168px;
				height: 60px;
				background: rgba(255, 255, 255, 1);
				border-radius: 36px;
				text-align: center;
				line-height: 60px;
			}
		}
	}
	.balance-head-before {
		display: flex;
		align-items: center;
		text-align: center;
		background-color: #ffffff;
		height: 136px;
		.accumulative {
			flex: 1;
			div:nth-child(1) {
				color: #221d2c;
				/* prettier-ignore */
				font-size: 16PX;
			}
			div:nth-child(2) {
				color: #717076;
				/* prettier-ignore */
				font-size: 12PX
			}
		}
		.about {
			flex: 1;
			div:nth-child(1) {
				color: #f70114;
				/* prettier-ignore */
				font-size: 16PX;
			}
			div:nth-child(2) {
				width: 118px;
				height: 34px;
				background: rgba(247, 1, 20, 1);
				border-radius: 22px;
				color: #ffffff;
				/* prettier-ignore */
				font-size: 12PX;
				margin: 0 auto;
			}
		}
		.line {
			/* prettier-ignore */
			width: 1PX;
			height: 62px;
			background-color: #c6c6c6;
		}
	}
	.kiting-account {
		width: 100%;
		height: 172px;
		background: rgba(255, 255, 255, 1);
		display: flex;
		flex-direction: column;
		margin-top: 22px;
		padding-top: 22px;
		/* prettier-ignore */
		font-size: 14PX;
		.title {
			display: flex;
			align-items: center;
			color: #221d2c;
			.icon {
				font-size: 52px;
				margin: 0 32px 0 40px;
			}
		}
		.account {
			display: flex;
			align-items: center;
			margin-top: 36px;
			padding-left: 124px;
			position: relative;
			div:nth-child(1) {
				margin-right: 40px;
				width: 200px;
			}
			.icon {
				position: absolute;
				right: 36px;
			}
		}
	}
}
/deep/.van-field__body {
	border-bottom: solid 1px #ccc;
	font-size: 36px;
}
/deep/.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
	border-width: 0 0;
}
.kiting-money {
	width: 100%;
	height: 234px;
	background: rgba(255, 255, 255, 1);
	margin-top: 14px;
	padding-top: 32px;
	.kiting-explain {
		width: 100%;
		padding-right: 30px;
		@include flexBox(space-between, center);
		.rule {
			color: #0160f7;
			height: 50px;
			@include flexBox(null, center);
			i {
				margin-right: 4px;
				font-size: 28px;
			}
		}
	}
	div:nth-child(1) {
		padding-left: 30px;
	}
	.cell-group {
		margin-top: 26px;
	}
	.all-kiting {
		color: #f70114;
		width: 172px;
		height: 60px;
		line-height: 60px;
		/* prettier-ignore */
		font-size:14PX;
		text-align: right;
	}
}
.kiting-btn {
	width: 336px;
	height: 80px;
	border-radius: 40px;
	margin: 56px auto 0 auto;
}

// 体现说明slot 内容
.content-box {
	font-weight: 400;
	div {
		color: #616161;
		font-size: 28px;
	}
	div:nth-child(odd) {
		margin-top: 20px;
	}
	div:nth-child(even) {
		/*margin-left: 14px;*/
		margin-top: 12px;
	}
	.know {
		width: 232px;
		line-height: 68px;
		color: $color-white;
		background: #f70114;
		border-radius: 50px;
		margin: 20px auto 0;
		display: flex;
		align-items: center;
		justify-content: center;
		i {
			font-size: 38px;
		}
	}
	.succeed {
		text-align: center;
		margin-bottom: 50px;
		p {
			font-size: 40px;
			font-weight: 600;
			margin-bottom: 10px;
		}
	}
	.footer {
		width: 100%;
		margin-top: 30px;
		display: flex;
		justify-content: space-around;
		div {
			width: 184px;
			height: 68px;
			line-height: 68px;
			text-align: center;
			font-size: 28px;
			border-radius: 50px;
		}
		.cancel {
			background: #d9d9d9;
			color: #717076;
		}
		.submit {
			background: #f70114;
			color: #ffffff;
		}
	}
}
</style>
